
window.onload = function() {
    var btn = document.getElementById("btn");
    btn.innerHTML = "<font color='red'>我爱花花</font>"
    btn.innerText = "<font color='red'>我爱花花</font>"
    btn.onclick = function() {alert("js 事件绑定");}

    document.getElementById("ul-event").onclick = function(){
        var liArr = document.getElementsByTagName("li");
        var liArr = document.getElementsByName("li-name");
        //for (var i = 0; i < liArr.length; i++) alert(liArr[i].innerHTML);
        
        //alert(document.getElementById("inp").value);

        liArr = document.getElementById("ul-id").children;
        //for (var i = 0; i < liArr.length; i++) alert(liArr[i].innerHTML);

        document.getElementById("ul-id").parentNode; //获取父元素
        document.getElementById("ul-id").previousElementSibling; //获取前一个兄弟元素
        document.getElementById("ul-id").nextElementSibling; //获取下一个兄弟元素
        document.getElementById("ul-id").setAttribute("num", "10"); //给元素添加属性
        //document.getElementById("ul-id").style.backgroundColor = "red"; //给元素设置内联css样式
        //document.getElementById("ul-id").className = "ad_css";
        document.getElementById("ul-id").setAttribute("class","ad_css dd");
        document.getElementById("div-id").clientWidth;  //内容区和内边距
        document.getElementById("div-id").clientHeight; //内容区和内边距
        document.getElementById("div-id").offsetWidth;  //内容区和内边距
        document.getElementById("div-id").offsetHeight; //内容区和内边距
        document.getElementById("div-id").offsetParent; //获取就近开启定位父元素
        document.getElementById("div-id").offsetTop;    //获取就近开启定位的父元素top偏移量、开启定位的父元素与子元素的上间距
        document.getElementById("div-id").offsetLeft;   //获取就近开启定位的父元素Left偏移量、开启定位的父元素与子元素的左间距
        document.getElementById("div-id").scrollWidth;  //滚动条总宽度(包含隐藏区域)
        document.getElementById("div-id").scrollHeight; //滚动条总高度(包含隐藏区域)
        document.getElementById("div-id").scrollLeft;   //滚动条滚动的距离、离左边的距离
        

        //获取对象当前正在使用的样式(只读)
        function getStyle(obj, name){
            return window.getComputedStyle?window.getComputedStyle(obj,null)[name]:obj.currentStyle[name];//后面是IE8获取的方式
        }
        alert(getStyle(document.getElementById("ul-id"), "width")); //获取元素当前css样式的宽度

        var firstli = document.getElementById("ul-id").firstElementChild; //获取第一个子元素
        document.getElementById("ul-id").lastElementChild; //获取最后一个子元素
        //alert("打印首个li元素内容：" + firstli.innerHTML);
        
        var checkboxArr = document.getElementsByName("checkbox-name")[0].checked = true;
        for(var i = 0; i<checkboxArr.length; i++){
            checkboxArr[i].checked =  !checkboxArr[i].checked; //
        }

        document.body; //获取body元素
        document.documentElement; //获取html标签元素
        var all = document.getElementsByTagName("*"); //获取页面所有元素
        //alert("获取页面所有元素数量：" + all.length);

        document.getElementsByClassName("box1"); //根据class获取数组元素、IE8及一下版本不支持

        //根据css选择器来获取元素数组
        document.querySelectorAll(".box1"); //根据class=box1
        document.querySelectorAll(".box1 div"); //根据class=box1并且标签为div
        document.querySelectorAll("#btn"); //根据id获取

        var ul = document.getElementById("ul-id"); //获取ul父元素

        var sxLi = document.createElement("li"); //创建一个山西li元素
        var sxTest = document.createTextNode("山西"); //创建一个文本内容节点
        sxLi.appendChild(sxTest); //将内容添加到li里面
        ul.appendChild(sxLi); //把li添加到ul里面
        
        var xaLi = document.createElement("li"); //创建一个西安li元素
        xaLi.appendChild(document.createTextNode("西安"));
        ul.insertBefore(xaLi, sxLi); //将西安插入到山西前面

        var scLi = document.createElement("li"); //创建一个四川li元素
        scLi.innerHTML = "四川"; //推荐方式、与.appendChild(document.createTextNode("四川"))一样
        ul.replaceChild(scLi, document.getElementById("li-id-bj")); //将北京li元素替换为四川
        scLi.setAttribute("num", "10"); //向标签内添加属性

        ul.removeChild(document.getElementById("li-id-sh")); //删除上海节点

        //confirm("是否确认"); //返回：true|false
    };

    var areaDiv = document.getElementById("areaDivId");
    var showMsg = document.getElementById("showMsgId");
    areaDiv.onmousemove = function(event){
        showMsg.innerText = 
         "左右坐标位置(screenX):" + event.screenX + ", 上下坐标位置(screenY):" + event.screenX+ //屏幕位置
         "\n左右坐标位置(clientX):" + event.clientX + ", 上下坐标位置(clientY):" + event.clientY+   //页面(body)可见部分
         "\n左右坐标位置(pageX):" + event.pageX + ", 上下坐标位置(pageY):" + event.pageY+       //页面(bydo)可见部分 + 包括被滚动条卷去的body部分,IE8不支持
         "\n左右坐标位置(offsetX):" + event.offsetX + ", 上下坐标位置(offsetY):" + event.offsetY; //具体标签元素部分 + 包括被滚动条卷去的
         event.screenX; //鼠标光标、屏幕左右位置
         event.screenX; //鼠标光标、屏幕上下位置
         event.clientX; //鼠标光标、body可见范围的左右位置
         event.clientY; //鼠标光标、body可见范围的上下位置
         event.pageX;   //鼠标光标、body可见范围 + 页面滚动条卷去部分的左右位置
         event.pageY;   //鼠标光标、body可见范围 + 页面滚动条卷去部分的上下位置
         event.offsetX; //鼠标光标、具体元素内部范围 + 被滚动条卷去部分的左右位置
         event.offsetY; //鼠标光标、具体元素内部范围 + 被滚动条卷去部分的上下位置
         event.stopPropagation(); //组织事件冒泡、阻止父元素的点击事件触
         event.preventDefault();  //取消默认事件、如：触发该事件是、不取消html滚动条事件滚动
    }

    areaDiv.onclick = function(){
        alert("我是areaDiv");
    }
    document.getElementById("areaDivId2").onclick = function(event){
        alert("我是areaDiv2");
        event.stopPropagation(); //组织事件冒泡、阻止父元素的点击事件触
    }
  
    var ulId = document.getElementById("ul-shijian-id");
    ulId.addEventListener("click", getEvent, false); //监听事件, 参数：事件名称、回调函数、触发规律（false:由内向外|true:由外向内）,默认false
    function getEvent(event){ //将事件绑定到父元素、通过委托target获取被点击的子元素
        alert(document.innerHTML);
        if(event.target.className == 'li-c-user') alert(event.target.tagName); //事件委托关键字: target,获取被点击的具体元素
    }

    //拖拽
    
    var tuoZhuai = document.getElementById("tuo-zhuai-id");
    var tuoZhuaiKuaiArr = document.getElementsByClassName("tuo-zhuai-kuai-c");
    // tuoZhuai.onclick = function(){
    //     alert('aaa');
    // }
    
    for(var i = 0; i < tuoZhuaiKuaiArr.length; i++){
        var tuoZhuaiKuai = tuoZhuaiKuaiArr[i];
        tuoZhuaiKuai.onmousedown = function(tuoZhuaiKuaiEvent){
            var mousedownOffsetxNum = tuoZhuaiKuaiEvent.offsetX;
            var mousedownOffsetyNum = tuoZhuaiKuaiEvent.offsetY;
            
            for(var i = 0; i < tuoZhuaiKuaiArr.length; i++) tuoZhuaiKuaiArr[i].style.zIndex = null;
            this.style.zIndex = 1;

            tuoZhuai.onmousemove = function(tuoZhuaiEvent){
                var tuoZhuaioffsetxNum = 0, tuoZhuaioffsetyNum = 0;
                if(this != tuoZhuaiEvent.target) {
                    tuoZhuaioffsetxNum = tuoZhuaiKuaiEvent.target.offsetLeft;   //子元素内部点击加上外间距
                    tuoZhuaioffsetyNum = tuoZhuaiKuaiEvent.target.offsetTop;    //子元素内部点击加上外间距
                }
                tuoZhuaioffsetxNum += (tuoZhuaiEvent.offsetX - mousedownOffsetxNum);    //左距离计算
                tuoZhuaioffsetyNum += (tuoZhuaiEvent.offsetY - mousedownOffsetyNum);    //上距离计算

                //左右是否超出判断
                if(tuoZhuaioffsetxNum <= 0) tuoZhuaioffsetxNum = 0; //小于0则默认0
                else {
                    var rightMargin = (this.scrollWidth - tuoZhuaiKuaiEvent.target.clientWidth);
                    if(tuoZhuaioffsetxNum > rightMargin) tuoZhuaioffsetxNum = rightMargin;
                }
                
                //上下是否超出判断
                if(tuoZhuaioffsetyNum <= 0) tuoZhuaioffsetyNum = 0;
                else {
                    var bottomMargin = (this.scrollHeight - tuoZhuaiKuaiEvent.target.clientHeight);
                    if(tuoZhuaioffsetyNum > bottomMargin) tuoZhuaioffsetyNum = bottomMargin;
                }

                tuoZhuaiKuaiEvent.target.style.left = tuoZhuaioffsetxNum + "px";
                tuoZhuaiKuaiEvent.target.style.top = tuoZhuaioffsetyNum + "px";
            };

            tuoZhuai.onmouseup = function() {
                this.onmousemove = null;
            };

            tuoZhuai.onmouseleave = function(){
                this.onmousemove = null;
                this.onmouseup = null;
            }
        }  
    }

    //滚轮
    var gunLun = document.getElementById("gun-lun-id");
    gunLun.onwheel = function(event){
        console.log(event.deltaX + "===" + event.deltaY);
    }

    //键盘事件
    document.getElementById("inp").onkeydown = function(event) { //onkeydown(键盘按下), onkeyup(键盘松开)
        console.log("键盘event.key:" + event.key);
        console.log("键盘event.key.charCodeAt():" + event.key.charCodeAt());
        console.log("键盘回车是否被按下判断:" + (event.code === 'Enter'));
        console.log("键盘按键区域：:"+event.location); //返回分别：0、1、2、3, 具体代办参考w3c详情 
        console.log("键盘ctrl健是否被按下：:"+event.ctrlKey);//返回boolean
        console.log("键盘alt健是否被按下：:"+event.altKey);//返回boolean
        console.log("键盘shift健是否被按下：:"+event.shiftKey);//返回boolean
    }

    //Navigator
    console.log("浏览器用户代理标头：" + navigator.userAgent);
    console.log("浏览器是否启用cookie：" + navigator.cookieEnabled);
    console.log("浏览器语言：" + navigator.language);
    console.log("浏览器用户是否在线：" + navigator.onLine);
    
    console.log("屏幕宽度：" + window.screen.width);
    console.log("屏幕高度：" + window.screen.height);
    console.log("屏幕宽度(不含任务栏)：" + window.screen.availWidth);
    console.log("屏幕高度(不含任务栏)：" + window.screen.availHeight);

    document.getElementById("but-tiaozhuan").onclick = function(){
        //window.location.reload(false); //重新加载当前文档、可以理解为刷新、false不清存刷、true清空缓存
        //window.location.assign("https://www.w3school.com.cn");  //将当前的网页跳转到新的网址(重定向)、可以后退(手动出发)
        //window.location.replace("https://www.w3school.com.cn"); //将当前的网页跳转到新的网址(重定向)、无法后退

        //window.location.hash;   //设置或获取锚部分、如：/js/js_es6.asp#mark_array_from, 获取结果：#mark_array_from
        //window.location.search; //获取url携带的参数部分：如：http//ip/xxx/?name=1&age=18, 获取结果：?name=1&age=18
        //window.location.href;   //设置或获取整个URL、如：http://127.0.0.1:5500/helloworld_html5/jsHtml/dom-test.html
        //window.location.hostname //获取ip或域名、如：127.0.0.1
        //window.location.origin; //获取协议+ip+端口、如：http://127.0.0.1:5500
        //window.location.pathname; //设置或获取URL路径名、如：/helloworld_html5/jsHtml/dom-test.html
        //window.location.port; //设置或获取端口、如：5500
        //window.location.protocol;   //设置或获取协议、如：http:|https:

        //window.history.length;  //浏览器、历史地址记录数量
        //window.history.back();  //返回前一个历史
        //window.history.forward(); //返回后一个历史
        //window.history.go(0);   //负值后退、正值前进,后退2页可以写-2, 写0重新加载页面


        window.console.time("test1"); //开始计时
        //代码逻辑
        window.console.timeEnd("test1"); //耗时毫秒

        //window.console.clear(); //清空控制台
        window.console.error("错误日志、%s", "占位符数据");
        window.console.warn("警告日志、%s", "占位符数据");
        window.console.info("普通日志、%s", "占位符数据");
        window.console.log("普通日志、%s", "占位符数据"); //与info一样、没啥区别
        window.console.trace(); //打印堆栈所有函数
        var ua = window.navigator.userAgent;
        if(/msie/i.test(ua) || "ActiveXObject" in window){
            alert("IE浏览器");
        }else if(/firefox/i.test(ua)){
            alert("火狐浏览器");
        }else if(/chrome/i.test(ua)){
            alert("chrome浏览器");
        }else{
            alert("未知浏览器：" + ua);
        }

        if (window.navigator.geolocation) { //经纬度获取、仅支持https协议
            window.navigator.geolocation.getCurrentPosition(showPosition, );
        }else alert("当前浏览器不支持定位");
    }

    function showPosition(position) { //定位获取成功时调用
        alert("当前位置: 纬" + position.coords.latitude + ",经" + position.coords.longitude);
    }
    function showError(error) { //定位获取异常时调用
        switch(error.code) {
            case error.PERMISSION_DENIED:
                alert("用户拒绝了地理定位请求"); break;
            case error.POSITION_UNAVAILABLE:
                alert("位置信息不可用"); break;
            case error.TIMEOUT:
                alert("获取用户位置的请求超时"); break;
            case error.UNKNOWN_ERROR:
                alert("发生未知错误"); break;
        }
    }

    
    document.getElementById("but-dinghsichufa-id").onclick = function(){
       
        var obj = this; //多次点击都是单例模式
        obj.intervalNum = " aaa";
         //定时器(重复执行)
        console.log("上次intervalTimer定时任务id: %s",this.intervalTimer);
        window.clearInterval(this.intervalTimer);  //如果之前有定时任务、则进行清除,避免出现很多定时任务
        this.intervalTimer = window.setInterval(function() {intervalFun(obj, "p1", "p2")}, 2000); //创建定时任务、并返回定时任务id、覆盖上一次的
        
        function intervalFun(obj, param1, param2){
            if(isNaN(obj.intervalNum)) obj.intervalNum = 0; //判定是否为数字、不是数字则改为数字,默认0
            console.log("重复定时器触发，第%s次，参数1：%s, 参数2：%s, 定时任务id: %s", ++obj.intervalNum, param1, param2, obj.intervalTimer);
            if(obj.intervalNum == 5) {
                window.clearInterval(obj.intervalTimer);  //关闭清除定时器
                obj.intervalNum = 0;
                console.log("关闭清除重复定时器");
            }
        }
        
        //定时器(单次执行)
        console.log("上次timeoutTimer定时任务id: %s",this.timeoutTimer);
        window.clearTimeout(this.timeoutTimer); //如果之前有定时任务、则进行清除,避免出现很多定时任务
        this.timeoutTimer = window.setTimeout(function() {timeoutFun(obj, "p1", "p2")}, 2000); //创建定时任务、并返回定时任务id、覆盖上一次的
        function timeoutFun(obj, param1, param2){
            console.log("单次定时器触发，参数1：%s, 参数2：%s, 定时任务id: %s", param1, param2, obj.timeoutTimer);
        }
        //window.clearTimeout(this.timeoutTimer); //关闭清除定时器、在定时器没执行前可以通过该方法停止
    } 
    
}

